<template>
	<view class="box">
		<view class="form">
			<view class="cont_box" v-for="(item, index) in dataList" :key="index">
				<!-- <view class="">兑换码</view> -->
					<view class="form-item-input">
						<input v-model="item.num" class="el_input" type="text" placeholder="请输入卡片劵码进行兑换" @input="onInput" />
						<view class="errInput" v-if="onErrInput(item.num)">卡号已使用</view>
						<view class="errInput" v-if="onErrInput2(item.num)">未查询到卡号</view>
					</view>
					<view class="option_box"><view @click="onAddInput(index)" :class="['iconfont', index > 0 ? 'iconfont-e729' : 'iconfont-e623']"></view></view>
			</view>
			<!-- <view class="box-add">
				<view class="add-input">
					<text class="u-m-r-10">兑换码</text>
					<u-icon name="e728;" size="24" color="#ffffff" custom-prefix="iconfont"></u-icon>
				</view>
			</view> -->
		</view>
		<view class="u-flex"><view class="pay" @click="onPay">立即兑换</view></view>
		<view class="" style="color: red;font-size: 30rpx;">注意事项：</view>
		<view class="zy">
			<view class="zu-text">1. 凭卡片兑换码即可兑换指定商品。</view>
			<view class="zu-text">2. 每日限量兑换，兑完即止！</view>
			<view class="zu-text">3. 如有疑问，请联系在线客服。</view>
		</view>
		<u-modal v-model="show" title="商品兑换信息" show-cancel-button confirm-text="确认兑换" @confirm="onConfirm">
			<view class="slot-content">
				<view class="content u-m-t-15" v-for="(item, index) in rowList" :key="index">
					<image :src="item.img" style="width: 200rpx;margin-right: 30rpx;" mode="widthFix"></image>
					<view class="content-right">
						<view class="u-line-2">{{ item.pro_name }}</view>
						<view class="">
							<view class="">价格：￥{{ item.price }}</view>
							<view class="u-m-t-10">运费：{{ item.amount > 0 ? '￥' + item.amount : '免运费' }}</view>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<sww-login />
	</view>
</template>

<script>
import { uniModal } from '@/utils/uniPromise';
export default {
	data() {
		return {
			num: '',
			show: false,
			dataForm: {},
			rowList: [],
			foundCode: false, //判断是否所有卡号都查不到数据
			usedList: [], //卡号使用过的数组
			noMsgList: [], // 没查到信息的卡号数组
			dataList: [
				{
					num: ''
				}
			]
		};
	},
	computed: {
		onErrInput(code) {
			return function(code) {
				return this.usedList.includes(code);
			};
		},
		onErrInput2(code) {
			return function(code) {
				if (this.foundCode) {
					return true;
				} else {
					return this.noMsgList.includes(code);
				}
			};
		}
	},
	methods: {
		$onShow() {
			this.$login();
		},
		onPay() {
			this.$login('onPay').then(() => {
				this.usedList = []
				this.noMsgList = []
				let data = this.dataList.filter(el => el.num != '');
				let judeg = true; // 判断是否卡号里面有用过的
				let mode = true; // 用于判断是否所有卡号都是 普通 商品兑换类型
				let foundNumCode = []; // 用户存储查到的卡号，用于判断那个卡号是假的
				this.foundCode = false;
				if (!data[0]) {
					this.$toast('请输入卡号');
					return;
				}
				let code = data.reduce((pre, el, index) => {
					if (index == 0) {
						pre += el.num;
					} else {
						pre = pre + ',' + el.num;
					}
					return pre;
				}, '');

				this.$resPost('GetElectronInfoByCode', {
					code
				}).then(res => {
					this.rowList = res.data;

					if (!this.rowList[0]) {
						this.foundCode = true;
						this.$toast('未查询到卡号');
						return;
					}

					this.rowList.forEach(el => {
						foundNumCode.push(el.code); //存放成功获取到的卡号

						if (el.status != '0') {
							// 把已被使用过的卡号存起来，方便显示提示信息
							this.usedList.push(el.code);
							judeg = false;
						}

						if (el.mode != 1) {
							mode = false;
						}
					});

					// 循环所有填写的卡号 并且把卡号对比成功获取回来的卡号，如果没有这卡号说明没有查询到信息
					// 把没查询到的卡号存起来，方便显示提示信息
					this.dataList.forEach(el => {
						if (!foundNumCode.includes(el.num) && el.num) {
							this.noMsgList.push(el.num);
						}
					});

					let rowData = this.dataList.filter(el => {
						if ((el.num + '').trim()) {
							return el;
						}
					});

					if (rowData.length != foundNumCode.length) {
						this.$toast('未查询到卡号');
						return;
					}

					if (!judeg) {
						this.$toast('卡号已被使用');
						return;
					}

					if (!mode) {
						this.$toast('不是兑换产品卡号');
						return;
					}
					this.show = true;
				});
			});
		},

		onInput(e) {
			this.foundCode = false;
			let num = e.detail.value;
			if (e.detail.value.length > 11) {
				this.$resPost('GetElectronInfoByCode', {
					code: num
				}).then(res => {
					if (!res.data[0]) {
						//没有查到信息
						this.noMsgList.push(num);
						return;
					}
					if (res.data[0].status != 0) this.usedList.push(num);
				});
			}
		},
		onAddInput(index) {
			if (index > 0) {
				this.dataList.splice(index, 1);
			} else {
				if (this.dataList.length >= 6) {
					this.$toast('最多可兑换6个');
					return;
				}
				this.dataList.push({
					num: ''
				});
			}
		},
		onConfirm() {
			let rowArray = [];
			let codeList = this.rowList
				.reduce((pre, el) => {
					// 开始  这里逻辑是 相同商品只添加数量
					let index = rowArray.findIndex(row => row.fk_prodtct_id == el.fk_prodtct_id);
					if (index == -1) {
						rowArray.push({
							...el,
							Pronum: 1
						});
					} else {
						rowArray[index].Pronum += 1;
					}
					// 结束

					// 这边是为了循环出所有卡号，用于订单页核销
					pre.push(el.code);
					return pre;
				}, [])
				.join(',');

			let params = {
				rowArray,
				codeList
			};

			this.$to(`/package/user/productExchange/exchange/index?params=${JSON.stringify(params)}`);
		}
	}
};
</script>

<style scoped lang="scss">
.box {
	padding: 26rpx;
}

.box-add {
	display: flex;
	justify-content: flex-end;

	.add-input {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		font-size: 23rpx;
		width: 140rpx;
		height: 50rpx;
		background-color: #00a6f8;
		color: #ffffff;
		border-radius: 7rpx;
	}
}

.form {
	font-size: 30rpx;
	.cont_box {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		.form-item-input {
			border: 1px solid #eee;
			border-radius: 10rpx;
			flex: 1;
			overflow: hidden;
			position: relative;
			.el_input{
				line-height: 76rpx;
				min-height: 76rpx;
				padding: 0 18rpx;
				font-size: 28rpx;
			}
		}
		.iconfont {
			margin-left: 30rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 1px solid #eee;
			padding: 8rpx;
			font-size: 30rpx;
		}
		.errInput {
			position: absolute;
			right: 10rpx;
			top: 50%;
			transform: translateY(-50%);
			font-size: 22rpx;
			color: red;
		}
	}
}

.content {
	display: flex;
	justify-content: space-between;
	padding: 20rpx 20rpx;
}

.content-right {
	flex: 1;
	padding: 5rpx 0;
	font-size: 26rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.content-right-b {
	text-align: right;
}

.zy {
	font-size: 30rpx;
}

.zu-text {
	margin-top: 15rpx;
	line-height: 1.8em;
}

.pay {
	width: 698rpx;
	height: 86rpx;
	line-height: 86rpx;
	background-color: #00a6f8;
	margin: 200rpx auto 100rpx;
	border-radius: 10rpx;
	text-align: center;
	font-size: 34rpx;
	color: #ffffff;
}
</style>
